<template>
    <div>
        <Menu collapsible hide-trigger :collapsed-width="64" v-model="collapsed" active-name="1">
            <template v-for="(item,index) in menuList">
                <side-menu-item v-if='showChildren(item)' :key="`menu-${item.name}`"
                                :parent-item="item"></side-menu-item>
                <menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`">
                    <common-icon :type="item.icon || ''"/>
                    <span>{{ showTitle(item) }}</span>
                </menu-item>
            </template>
        </Menu>
    </div>
</template>

<script>
    import SideMenuItem from './side-menu-item.vue'
    import mixin from './mixin'

    export default {
        name: "side-menu",
        mixins: [mixin],
        props: {
            menuList: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        components: {
            SideMenuItem
        },
        data() {
            return {
                collapsed: true,
            }
        },
        computed: {},
        methods: {}
    }
</script>

<style scoped>

</style>
